<!--
 * @Author: hu_binbin
 * @Date: 2021-08-07 10:39:43
 * @LastEditTime: 2021-08-07 16:03:27
 * @Description: 新建任务
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" />
			</template>
		</Theader>

		<!-- 列表区域 -->
		<div class="doc-wrapper">
			<div>
                <van-field 
                    label="变电站:"  
                    readonly 
                    :border="false"
                    v-model="taskDetail.substationName"
                />
                <van-field 
                    label="电压等级:" 
                    readonly 
                    :border="false"
                    v-model="taskDetail.voltageLevel" 
                />
                <van-field class="bg-gray"
                    label="巡视类型:" 
                    readonly 
                    :border="false" 
                    @click="showTourType=true"
                    v-model="taskDetail.patrolTypeName" 
                    right-icon="arrow"
				    @click-right-icon="showTourType=true"/>
                <van-field class="bg-gray"
                    label="计划开始时间:" 
                    :border="false"  
                    readonly 
                    v-model="taskDetail.cycleTime" 
                >
                    <template slot="right-icon">
                        <van-image style="position: relative;top: 0.2rem;"
                        @click="isDatePicker=true"  width="24" height="24" :src="icon.iconDate"/>
                    </template>
                </van-field>    
                <div>
                    <van-row style="padding: 0 15px;color:#666;margin-top: 15px;" class="font14">备注:</van-row>
                    <div style="margin: 15px;border-radius: 5px;">
                        <van-field class="textarea-content" v-model.trim="taskDetail.remark" rows="2" autosize type="textarea" maxlength="256"
                            placeholder="请输入备注" show-word-limit />
                    </div>
                </div>
                <van-cell :border="false" class="selPerson">
                    <template slot="title">
                        <div>巡视人员:</div>
                        <van-image style="margin-left: 0.7rem;" class="imgSize" width="20" height="20"   @click="showTourPerson=true" :src="icon.iconAdd" />
                    </template>
                    <template slot="default">
                        <van-button plain :icon="icon.iconDelete" icon-position="right" v-for="(item,index) in selTourPerson" :key="index" type="primary" color="#0EB295"  size="small">{{item.userName}}</van-button>
                    </template>
                </van-cell>
            </div>
        </div>
        <div class="btn">
            <van-button style="width: 45%;" type="primary" plain color="#666666" size="small">取消</van-button>
            <van-button style="width: 45%;" type="primary" color="#0EB295" size="small">保存</van-button>
        </div>
	</article>
</template>
<script>
	import Theader from "../component/header"
	export default {
		name: "addTask",
		components:{
			Theader
		},
		data() {
			return {
                title: "新建任务",
                taskDetail: {
                    substationName:"东善桥变",
                    voltageLevel:"500Kv",
                    patrolTypeName:"全面巡视",
                    cycleTime:"2月",
                    fristTime:"2021/07/07 18:30:00",
                    team:"变电运维一班",
                    tourWay:"人工巡视",
                    planTime:"2021/07/07 18:30:00",
                    nextTime:"2021/07/07 18:30:00",
                    require:"的撒啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",
                },
                icon: {
                    iconAdd: require("../../../../assets/tour/icon-add.png"),
                    iconDelete: require("../../../../assets/tour/icon-delete.png"),
                    iconDate: require("../../../../assets/tour/icon-date.png")
                },
                selTourPerson: [
                    {userName:"张爱国"},
                    {userName:"你染"},
                   
                ],
                showTourPerson: false,
                showTourType:false,
                isDatePicker:false,
			}
		},
		computed: {

		},
		methods: {
		
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #F5F6F7 ;
    }
    .doc-wrapper{
        margin: 0.7rem;
        box-shadow: 0px 0px 4px 2px #e0e0e0;
        margin-top: 3.7rem;
        border-radius: 0.3rem;
        background: #fff;
        padding-bottom: 1rem;
    }
    .bg-gray /deep/ .van-cell__value{
        background: #F5F6F7;
    }
    /deep/ .van-field__label{
        width: 6.5rem;
    }
    .textarea-content{
		border: 1px solid #E2E2E2;color:#999;
    }
    .selPerson .van-cell__title{
        width: 40%;
        flex: inherit;
    }
    .selPerson .van-cell__title,.van-cell__value{
        display: flex;
        align-items: center;
    }
    .selPerson .van-cell__value{
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .selPerson /deep/ .van-icon__image{
        width: 1.7rem;
        height: 1.7rem;
    }
    .selPerson .van-button{
        border-radius: 0.4rem;
        background: #F5F6F7;
        margin-bottom: 0.5rem;
    }
    .btn{
        padding-top: 1.5rem;
        padding-bottom: 1rem;
        width: 100%;
        justify-content: space-around;
        display: flex;
        position: fixed;
        bottom: 0px;
        background: rgb(255, 255, 255);
    }
</style>
